<template>
  <!-- 充值 -->
  <el-dialog
    title="充值"
    :visible="value"
    width="700px"
    custom-class="dialog-box"
    @close="onClose"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="160px"
      @submit.native.prevent="onSubmit"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="姓名：">
            <label>{{curItem.name}}</label>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="账户金额：">
            <label>￥{{vipInfo?vipInfo.amount:0}}</label>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="赠送余额：">
            <label v-if="curItem!=null">￥{{curItem.grandPresenter?curItem.grandPresenter:0}}</label>
          </el-form-item>
        </el-col>-->
        <el-col :span="24">
          <el-form-item label="充值金额：" prop="amount">
            <el-input v-model="form.amount"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="赠送金额：" prop="giveAmount">
            <el-input v-model="form.giveAmount"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注：">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="选择支付方式：">
            <el-radio-group @change="changeSource" v-model="form.payWay">
              <template v-for="(value,key) in rechargeArr">
                <el-radio v-if="key!=6" :label="key" :key="key">{{value}}</el-radio>
              </template>
              <!-- <el-radio :label="10">银行卡</el-radio>
              <el-radio :label="8">支付宝</el-radio>
              <el-radio :label="9">微信</el-radio>
              <el-radio :label="18">POS机支付</el-radio>-->
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- <el-col v-if="form.source==8 || form.source==9" :span="22" style="padding-left:10px;">
          <label style="display:inline-block;width:100%;margin-bottom:10px;">请使用扫码枪读取用户手机上的条码</label>
          <el-input ref="phoneCode" v-model="code"></el-input>
        </el-col>-->
      </el-row>
      <el-button v-show="false" :loading="btnLoading" native-type="submit">提交</el-button>
    </el-form>
    <span slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
      <el-button :loading="btnLoading" @click="onClose">取 消</el-button>
    </span>
    <div v-show="showpay" class="print_body printOrder-data">
      <h4 style="text-align:center;">充值清单</h4>
      <ul class="nav_patient_menu">
        <li>姓名：{{curItem.name}}</li>
        <li>性别：{{curItem.sex | toSex}}</li>
        <li>年龄：{{curItem.age}}</li>
        <li>档案号：{{curItem.medicalCardCode}}</li>
        <li>金额（￥）：{{payInfo.amount}}</li>
        <li>备注：{{payInfo.desc}}</li>
      </ul>
      <!-- <div class="title_box">
        <span>项目：</span>
        <span>金额（￥）：{{payInfo.amount}}</span>
        <span>备注：{{payInfo.desc}}</span>
      </div>-->
      <div>
        <table class="table-box">
          <thead>
            <tr>
              <th>项目金额</th>
              <th>金额（￥）</th>
              <th>备注</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>历史金额</td>
              <td>{{payInfo.beforeMoney}}</td>
              <td></td>
            </tr>
            <tr>
              <td>本次充值金额</td>
              <td>{{payInfo.amount}}</td>
              <td></td>
            </tr>
            <tr>
              <td>本次赠送金额</td>
              <td>{{payInfo.freeGiveMoney}}</td>
              <td></td>
            </tr>
            <tr>
              <td>本次余额</td>
              <td>{{payInfo.afterMoney}}</td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import md5 from "js-md5";
import encryptionArr from "../_enum/jiami";
import valid from "@/_js/validate.js";
import enumArr from "../_enum/enum";
export default {
  props: ["value", "curItem", "vip"],
  data() {
    return {
      btnLoading: false,
      form: {
        patientId: "",
        amount: "",
        giveAmount: "",
        remark: "",
        payWay: "7",
      },
      showpay: false,
      payInfo: "",
      code: "",
      vipList: [],
      rechargeArr: enumArr.rechargeArr,
      rules: {
        amount: [
          { required: true, message: "请输入充值金额", trigger: "blur" },
          { validator: valid.integerAndFloat, trigger: "blur" },
          { validator: valid.integerAndFloat, trigger: "blur" },
          { min: 1, max: 6, message: "请输入正确的金额", trigger: "blur" },
        ],
        giveAmount: [
          { required: false, message: "请输入赠送金额", trigger: "blur" },
          { validator: valid.integerAndFloat, trigger: "blur" },
          { validator: valid.integerAndFloat, trigger: "blur" },
        ],
      },
      typeNameArray: [], //种类标本
      vipInfo: "",
    };
  },
  mounted() {
    this.onOpen();
  },
  methods: {
    onSubmit() {
      let th = this;
      let j = { timestamp: Math.round(new Date().getTime() / 1000).toString() };
      let json = { signature: {} };
      let add = function () {
        th.btnLoading = true;
        th.$api.rechargeCenterTopUp(json).then((res) => {
          if (res.executed) {
            th.payInfo = res.dataBody;
            th.$message.success("操作成功");
            th.$emit("success");
            th.onClose();
          } else {
            th.$message.error(res.message);
          }
          th.btnLoading = false;
        });
      };
      th.$refs["form"].validate((v) => {
        if (v) {
          th.form.patientId = th.curItem.patientId;
          json.signature = md5(encryptionArr({ ...th.form, ...j }));
          json = { ...th.form, ...j, ...json };
          add();
        }
      });
    },
    onOpen() {
      let th = this;
      th.$nextTick(function () {
        if (th.curItem) {
          th.form.patientId = th.curItem.patientId;
          th.$api
            .getPatientMemberInfo({ patientId: this.curItem.patientId })
            .then((res) => {
              if (res.executed) {
                th.vipInfo = res.dataBody.account;
              }
            });
        }
      });
    },
    onClose() {
      let th = this;
      th.$refs["form"].resetFields();
      th.$emit("input", false);
    },
    printPay() {
      let th = this;
      window.document.body.innerHTML = document.getElementsByClassName(
        "printOrder-data"
      )[0].innerHTML;
      window.print();
      window.location.reload();
    },
    changeSource() {
      let th = this;
      if (th.form.source == 8 || th.form.source == 9) {
        th.$refs["phoneCode"].focus();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
